<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hidden{
            display:none;
        }
    </style>
</head>
<body>
<!--演示nodeName and nodeValue and childNodes, etc.-->
<div id="wrapper"><div id="b2">hello</div><div id="b3">hello</div><div id="b4">hello</div><div id="b5">hello</div>
</div>

<!--演示node操作的一些方法-->
<h2>click the div box to add a "world"</h2>
<div id="container" style="border:1px solid #66ffcc;">
    <p>hello</p>
</div>

<div id="jail" style="border:1px solid #66ffcc;width:300px;">
    <p>hey</p>
    <p>yoooooo</p>
    <p>上班是不可能上班的</p>
    <p>学习这么差，谁要我呢</p>
    <p>还是这里好</p>
    <p>这里的老哥个个都是人才</p>
    <p>说话又好听（你点我试试）</p>
    <p>可萌了，我超喜欢这里的</p>
</div>
<button onclick="lovelyGirl()">我要说句话</button>
<ul id="lists">
    <li>漩涡鸣人</li>
    <li>漩涡博人</li>
    <li>漩涡向日葵</li>
</ul>
<button id="btn1" onclick="deepCopy()">深复制后的长度</button>
<button id="btn2" onclick="shallowCopy()">浅复制后的长度</button>
<div id="my_div" class="My div" data-mySpecialAttribute="hello world" style="width:200px;"></div>



<div id="heyman">hello</div>
<button onclick="addPara()">添加小汤爷123号 !!!</button>


<button onclick="greeting()">sayhi</button>
<p id="para">hello world</p>
<script>
  var wrap = document.getElementById("wrapper");
  var firstChild = wrap.childNodes[1];
  console.log(firstChild.nodeType);//元素节点
  var someNode = wrap.childNodes.item(0);
  console.log(someNode.nodeType);//文本节点
  var arr = Array.prototype.slice.apply(wrap.childNodes,[0,3]);
  console.log(arr);
  function convertToArray(nodes) {
      var arr = null;
      try{
          arr = Array.prototype.slice.call(nodes, 0);
      } catch(ex){
          var arr = [];
          for(var i = 0; i < nodes.length; i++){
              arr.push(nodes[i]);
          }
      }
      return arr;
  }
  (function sayValue() {
      var list = wrap.childNodes,
          arrOfVal = [];
      for(var i = 0; i < list.length; i++){
          arr.push(list[i].nodeName);
      }
      console.log(arr);
  })();


  //演示node操作的一些方法
    var parent = document.getElementById("container");
    parent.onclick = function () {
        var newChild = document.createElement("p");
        newChild.innerHTML = "world";
        this.appendChild(newChild);
        console.log(parent.lastChild);//<p>world</p>
        this.onclick = null;//防止多次添加，鬼畜洗脑
    };
    var jail = document.getElementById("jail");
    console.log(jail.children);
    jail.onclick = function () {
        var newchild = document.createElement("p");
        newchild.innerHTML = "还会装萌妹，嘤嘤嘤";
        jail.insertBefore(newchild, jail.lastElementChild);
        this.onclick = null;//防止多次添加，鬼畜洗脑
    };
    function lovelyGirl() {
        //替换节点
        //顺便说一句，childNodes会囊括所有的子节点，而children只会包含元素子节点
        var newChild = document.createElement("p");
        newChild.innerHTML = "正太赛高";
        jail.replaceChild(newChild, jail.children[0]);
    }
    var myList = document.getElementById("lists");
    function deepCopy() {
        var newCopy = myList.cloneNode(true);
        var str = newCopy.childNodes.length;
        var btn = document.getElementById("btn1");
        btn.innerHTML = str;
    }
    function shallowCopy() {
        var newCopy = myList.cloneNode(false);
        var str = newCopy.childNodes.length;
        var btn = document.getElementById("btn2");
        btn.innerHTML = str;
    }

    //取得对body 的引用可写为document.body
    //来取一下所有的元素
    var collection = document.getElementsByTagName("*");
    console.log(collection);
    //使用getAttribute以及setAttribute,removeAttribute
    var div = document.getElementById("my_div");
    var val = div.style.width;
    //使用getAttribute来读取style返回的只是一个css文本
    var val1 = div.getAttribute("class");
    var val2 = div.getAttribute("data-mySpecialAttribute");
    console.log(val);
    console.log(val1);
    console.log(val2);

    //使用setAttribute来创建属性
    div.setAttribute("id", "mybox");
    console.log(div.getAttribute("id"));//可以读取成功
    div.className="hey";
    div.id="hello";
    console.log(div.getAttribute("class"));
    //>>>>>>>>>>>>>>
    //removeAttribute不常用，多用于序列化DOM元素
    //>>>>>>>>>>>>>

    //文本节点中操作文本的方法
  var txt = document.getElementById("heyman").firstChild;
  txt.appendData(" world");
  txt.deleteData(5,6);//将txt中的文本从第六位开始删除，总共删除6位字符，结果又回到了初始状态
  txt.insertData(5," world");//我胡汉三又回来了，又变成了hello world
  txt.replaceData(5,3,"man");//从第五位开始删除3位，替换为man
  txt.splitText(5);//从第五位开始将原文本分为两个文本节点
  console.log(txt.nodeValue);//此时就只有hello ,txt.nextSibling.nodeValue才可以访问到第二个文本
  var str = txt.substringData(0,txt.length);
  console.log(str);

  function addPara() {
      var fragment = document.createDocumentFragment(),
          ul = document.createElement("ul"),
          li = null;
      for(var i=0; i<3; i++){
          li = document.createElement("li");
          li.appendChild(document.createTextNode("小汤爷" + i + "号"));
          li.style.listStyleType = "none";
          fragment.appendChild(li);
      }
      ul.appendChild(fragment);
      document.body.appendChild(ul);
  }
  function loadscript(code) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      try{
          script.appendChild(document.createTextNode(code));
      }catch (ex){
          script.text = code;
      }
      document.body.appendChild(script);
  }

  function greeting() {
      loadscript("function sayhi(){alert('hi')}");
      sayhi();//相当于执行sayhi()
  }

  //使用一下insertAdjacentHTML
  var p = document.getElementById("para");
  p.insertAdjacentHTML("beforebegin", "<p>hey yo</p>");
  console.log(p.outerHTML);
</script>
</body>
</html>
